
<template>
  <div class="collect">
    <typeMenu :list="types" @select="selectType" />
    <div class="content">
      <dynasty v-if="typeIdx == 0" />
      <yi v-if="typeIdx == 4" />
    </div>
  </div>
</template>
<script setup>
import { ref } from 'vue';
import typeMenu from '@/components/common/typeMenu.vue';
import dynasty from './modules/dynasty.vue';
import yi from './modules/yi.vue';
const types = ['帝王世系', '唐诗宋词', '名著阅读', '文化收藏', '周易']
const typeIdx = ref(0)
function selectType(y) {
  typeIdx.value = y
}
</script>
<style scoped lang="scss">
.collect {
  width: 100%;
  height: 100%;

  .tab {
    display: flex;

    div {
      padding: 0 20px;
      cursor: pointer;
      height: 50px;
      line-height: 50px;
    }

    .active {
      background-color: #1889fa;
    }
  }

  .content {
    width: 100%;
    height: calc(100% - 50px);
    padding: 10px;
  }
}
</style>
